<!-- 数据流通确权 数据审核 -->
<template>
  <div id='auditing'>
    <div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
      <div class='table_box' style="margin-right: 20px;">
        <div style="color: #FFFFFF; font-size: 18px; margin-left: 10px; margin-top: 10px;">数据流通确权-资源审核</div>
        <el-table
          :header-cell-style="{ background: 'transparent', color: '#606266' }"
          :data="tableData2" height='80vh' border
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
          <el-table-column prop="resourceName" label="数据资源名称"/>
          <el-table-column prop="userShowName" label="申请用户"/>
          <el-table-column prop="applyNote" label="申请附言"/>
          <el-table-column prop="auditStatus" label="审核状态">
            <template slot-scope="scope">
              <el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'NOT_SUBMITTED'">
                未提交
              </el-tag>
              <el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'SUBMITTED'">
                已提交
              </el-tag>
              <el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'AUDIT_APPROVE'">
                审核通过
              </el-tag>
              <el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'REJECTED'">
                已驳回
              </el-tag>
              <el-tag effect="plain" type="success" v-if="scope.row.auditStatus == 'DOWNLOADABLE'">
                可下载
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间">
            <template slot-scope="scope">
              {{ timestampToDatetime(scope.row.applyTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" v-if="scope.row.auditStatus == 'SUBMITTED'"
                         @click="changeApplyStatus1(scope.row.userId, scope.row.resourceId, true)">
                数据确认
              </el-button>
              <el-button type="danger" size="mini" v-if="scope.row.auditStatus == 'SUBMITTED'"
                         @click="changeApplyStatus1(scope.row.userId, scope.row.resourceId, false)">
                数据拒绝
              </el-button>
              <el-button type="success" size="mini" v-if="scope.row.auditStatus == 'AUDIT_APPROVE'"
                         @click="changeApplyStatus2(scope.row.userId, scope.row.resourceId)">
                平台确认
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'auditing',
  data() {
    return {
      loading: false,
      tableData2: []
    }
  },
  mounted() {
    // 审核
    // http://localhost:8081/cloud/jcce/v1.0/kt1/userResourceApply?resourceId=106&userId=196618686130565120&applyNote=12321321312
    this.fetchDataApply()
  },
  methods: {
    fetchDataApply() {
      let _self = this
      request({
        url: '/cloud/jcce/v1.0/kt1/userResourceApplyList',
        method: 'get',
        params: {
          pageNo: 1,
          pageSize: 100
        }
      }).then((data) => {
        console.log(data)
        _self.tableData2 = data.data.pageData
      })
    },
    timestampToDatetime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    changeApplyStatus1(userId, resourceId, status) {
      let _self = this
      this.$confirm('是否需要确认要执行该操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: '/cloud/jcce/v1.0/kt1/userResourceApply/' + resourceId + '/' + userId + '?status=' + status,
          method: 'put',
        }).then((data) => {
          console.log(data)
          _self.$message({
            message: '执行成功',
            type: 'success'
          })
          _self.fetchDataApply()
        })
      })
    },
    changeApplyStatus2(userId, resourceId) {
      let _self = this
      this.$confirm('是否需要确认要执行该操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: '/cloud/jcce/v1.0/kt1/platform/userResourceApply/' + resourceId + '/' + userId,
          method: 'put',
        }).then((data) => {
          console.log(data)
          _self.$message({
            message: '执行成功',
            type: 'success'
          })
          _self.fetchDataApply()
        })
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style lang="scss">
.table_box {
  .el-table {
    background-color: rgba(38, 38, 38, 0);
    border-radius: 3px;
    border-color: white;
  }

  .el-table tr {
    background-color: transparent;
    color: white;
  }

  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }

  .el-table th {
    background-color: rgba(150, 150, 150, 0.26) !important;
    font-size: 11pt;
  }

  .el-table th .cell {
    color: #ffffff;
    font-size: 11pt;
    height: 19px
  }

  .el-table td {
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 11pt;
  }

  .el-table--enable-row-hover .el-table__body tr:hover td {
    background-color: rgba(38, 38, 38, 0.5) !important;
    color: white !important;
  }
}

</style>
